﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>4.relative和absolute的结合</title>
    <script>
        //第二步中大家知道元素相对定位“relative”是相对于元素自身定位，而在第三步中大家知道元素绝对定位“absolute”是相对于html。但这种说法只有满足这样的条件才是正常的：“绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置，那么绝对定位的元素的参考物就是html”，这样一来，“relative”和“absolute”的结合就能起到很大的作用。

        //共有三个div放在body内，而且他们三个div的关系是“div-1>div-2>div-3”,而且在div-3有这么一个绝对定位：
        //1、div-1与div-2都没有设置“position:relative”，此时我们的div-3绝对定位后就漂到了上图中“div-3c”的位置上；

        //2、现在我们在div-2元素中加设置一个“position: relative”，此时我们的div-3绝对定位后就漂到了上图中的“div-3a”的位置;

        //3、接下来把相对定位的设置换到div-1元素上，此时div-3绝对定位后就到了div-3b的位置。

        //只想说明一点：如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止。
    </script>
    <style>

        #div-1 {
            width: 400px;
            height: 400px;
            padding: 10px;
            background-color: #d33;
            color: #fff;
        }

        #div-2 {
            width: 300px;
            height: 300px;
            padding: 10px;
            background-color: #3d3;
            color: #fff;
        }
        #div-3 {
            width: 200px;
            height: 200px;
            padding: 10px;
            background-color: #33d;
            color: #fff;
        }
        #div-3 {
            position: absolute;
            left: 0;
            top: 0;
        }
        #div-2 {
            position: relative;
        }
        #div-1 {
			 position:relative;
			}
    </style>
</head>
<body>
        <div id="div-1">
            <div id="div-2">
                <div id="div-3">
                </div>
            </div>
                
        </div>

</body>
</html>